<template>
  <div>
    <nav-bar title="我的巡检"></nav-bar>
    <div class="fixedInspection maxinBox">
       <!-- v-show="fixedDetails && fixedDetails.item && !fixedDetails.item.completed" -->
      {{fixedDetails && fixedDetails.item && !fixedDetails.item.completed}}
      <div class="backgroundfff center" style="padding: 0.5rem;" v-if="fixedDetails && fixedDetails.item && !fixedDetails.item.completed">
        <!-- <svg-icon icon-class="qrCode" class="color999" style="font-size: 4rem;" /> -->
        <!-- <p class="fontSize14 color999">点击扫一扫，扫描二维码进入巡更</p> -->
        <van-button round type="info" class="fontSize16" style="width: 70%;" @click="sweep" v-if="isShowScan">扫一扫</van-button>
        <div id="code" style="width:100%;height:16rem; background-color: #fff; text-align: center;position: absolute;top: 0;left: 0;"></div>
      </div>
      <div class="inspectionRoute" :style="fixedDetails && !fixedDetails.status? 'margin-top: 10rem;': 'margin-top: 0'">
        <div class="titleModel">我的巡检路线</div>
        <van-row class="inspection backgroundfff" v-for="(item, index) in myInspection" :key="index">
          <van-col :span="2">{{index + 1}}</van-col>
          <van-col :span="8">{{item.patrolPointName}}</van-col>
          <van-col :span="8">
            <van-button v-if="item.result === 0" size="mini" plain type="primary">正常</van-button>
            <van-button v-else-if="item.result === 1" size="mini" plain type="danger">异常</van-button>
            <span v-else></span>
          </van-col>
          <van-col :span="6">
            <van-button class="vanButtonActive" round size="small" type="default" v-if="item.completed" @click="onScan(item)">已完成</van-button>
            <van-button class="vanButton" round size="small" type="default" v-else  @click="onScan(item)">未完成</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
  let Base64 = require('js-base64').Base64
  import fixedInspectionApi from '../../../../api/workAPI/fixedInspectionAPI.js'
  export default {
    data() {
      return {
        user: {
          userStatus: '',
          userType: '',
        },
        isShowScan: true,
        myInspection: [],
        scan: '',
        fixedDetails: null,
        inspectionFixedDetails: null
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.fixedDetails = JSON.parse(localStorage.getItem('fixedDetails'))
      this.getMyLine()
      const self = this
      if (window.plus) {
        self.plusReady()
      } else {
        document.addEventListener('plusready', self.plusReady, false);
      }
      document.addEventListener('DOMContentLoaded', function() {
        alert('DOMLoaded')
        self.domready = true;
        self.plusReady()
      }, false)
    },
    destroyed() {
      this.closeScan()
    },
    methods: {
      // 关闭二维码
      closeScan() {
        if (!window.plus) return;
        this.scan.close();
      },
      plusReady() {
        const self = this
        // 获取窗口
        self.scan = new plus.barcode.Barcode('code');
        self.scan.onmarked = self.onmarked;
        self.scan.start();
      },

      sweep() {
        this.isShowScan = false
        const self = this
        self.scan.start();
      },

      onmarked(type, result) {
        if (result.indexOf(':') !== -1) {
          let pointMessage = JSON.parse(Base64.decode(result.slice(result.lastIndexOf(':') + 1)))
          if (pointMessage.pointId) {
            if (this.fixedDetails.item.checkType === 1) {
              if (pointMessage.pointId === this.inspectionFixedDetails.currentPatrolPointId) {
                fixedInspectionApi.getPointDetails(pointMessage.pointId).then(res => {
                  this.scan.close()
                  let fixedInspectionScan = {
                    points: res,
                    id: this.fixedDetails.item.id
                  }
                  localStorage.setItem('fixedInspectionScan', JSON.stringify(fixedInspectionScan))
                  this.$router.push({
                    name: 'InspectionRegistrationScan'
                  })
                })
              } else {
                this.$dialog.alert({
                  title: '扫描结果',
                  message: '请有序巡检',
                  className: 'dialog'
                }).then(() => {
                  this.sweep()
                }).catch(() => {
                  this.sweep()
                });
              }
            } else {
              fixedInspectionApi.getPointDetails(pointMessage.pointId).then(res => {
                this.scan.close()
                let fixedInspectionScan = {
                  points: res,
                  id: this.fixedDetails.item.id
                }
                localStorage.setItem('fixedInspectionScan', JSON.stringify(fixedInspectionScan))
                this.$router.push({
                  name: 'InspectionRegistrationScan'
                })
              })
            }
          } else {
            this.$dialog.alert({
              title: '扫描结果',
              message: '请扫描正确的二维码',
              className: 'dialog'
            }).then(() => {
              this.sweep()
            }).catch(() => {
              this.sweep()
            });
          }
        } else {
          this.$dialog.alert({
            title: '扫描结果',
            message: '扫描错误,请重新二维码',
            className: 'dialog'
          }).then(() => {
            this.sweep()
          }).catch(() => {
            this.sweep()
          });
        }
      },
      // 查询我的巡检路线
      getMyLine() {
        fixedInspectionApi.getTaskRoute(this.fixedDetails.item.id).then(res => {
          this.inspectionFixedDetails = res
          this.myInspection = res.details
        })
      },
      // 扫描二维码开始
      onScan(data) {
        localStorage.setItem('pointDetails', JSON.stringify(data))
        if (data.completed === 1) {
          this.$router.push({
            name: 'InspectionRegistration'
          })
        }
      }
    },
  }
</script>

<style scoped lang="scss">
img{
  height: 6.25rem;
}
</style>
